import React, { useEffect, useState } from 'react';
import { Card, Input, Button, Table, Divider } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect, routerRedux } from 'dva';

import options from './options';
const Search = Input.Search;
const formItemLayout = {
  labelCol: { xxl: { span: 1 }, xl: { span: 12 } },
  wrapperCol: { xxl: { span: 1 }, xl: { span: 12 } },
};

function index({ dispatch, wineStyleList, summaryData, wineSerchName, exhibitorSerchName }) {
  const [tableLoding, setTableLoding] = useState(true);

  useEffect(() => {
    dispatch({ type: 'wineInfo/apiGetWineStyleList' });
    dispatch({
      type: 'wineInfo/apiGetSummaryData',
    });
  }, []);
  useEffect(() => {
    if (wineStyleList) {
      setTableLoding(false);
    } else {
      setTableLoding(true);
    }
  }, [wineStyleList]);

  const handelView = (id) => {
    dispatch(routerRedux.push(`/wineInfo/WineEdit/${id}`));
  };

  const columns = options.getTableConfig({ handelView: handelView });
  const totalInfo =
    (summaryData && [
      { title: '总酒款数', value: summaryData.umCount },
      { title: '上海站报名人数', value: summaryData.umSH },
      { title: '成都站报名人数', value: summaryData.ueCD },
    ]) ||
    null;

  return (
    <PageHeaderWrapper title={false}>
      <Card style={{ marginBottom: 24, padding: '20px 0px' }}>
        <div style={{ display: 'flex', marginLeft: 24 }}>
          <div>
            <label style={{ lineHeight: '32px', fontSize: 12 }}>酒款名称：</label>
            <Search
              style={{ width: 260 }}
              placeholder="请输入酒款名称"
              enterButton="搜索"
              size="middle"
              loading={wineSerchName}
              onSearch={(value) => {
                dispatch({ type: 'wineInfo/setLoding', payload: { wineSerchName: true } });
                dispatch({ type: 'wineInfo/apiGetWineStyleList', payload: { wineName: value } });
              }}
            />
          </div>
          <div style={{ marginLeft: 100 }}>
            <label style={{ lineHeight: '32px', fontSize: 12 }}>展商名称：</label>
            <Search
              style={{ width: 260 }}
              placeholder="请输入展商名称"
              enterButton="搜索"
              size="middle"
              loading={exhibitorSerchName}
              onSearch={(value) => {
                dispatch({ type: 'wineInfo/setLoding', payload: { exhibitorSerchName: true } });
                dispatch({
                  type: 'wineInfo/apiGetWineStyleList',
                  payload: { exhibitorName: value },
                });
              }}
            />
          </div>
        </div>
      </Card>
      <Card>
        <Table
          style={{ paddingTop: 48 }}
          columns={columns}
          dataSource={wineStyleList && wineStyleList}
          loading={tableLoding}
          pagination={{
            showQuickJumper: true,
            showSizeChanger: false,
            pageSize: 10,
          }}
          rowKey={(record) => {
            return record.id;
          }}
        />
      </Card>
    </PageHeaderWrapper>
  );
}

export default connect(({ wineInfo }) => {
  return {
    wineStyleList: wineInfo.wineStyleList,
    summaryData: wineInfo.summaryData,
    wineSerchName: wineInfo.wineSerchName,
    exhibitorSerchName: wineInfo.exhibitorSerchName,
  };
})(index);
